import React, { useState, useEffect } from 'react';
import AddForm from './AddForm';
import FormItem from './FormItem';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, LineChart, Line, PieChart, Pie, Cell, ResponsiveContainer, RadarChart, PolarGrid, PolarAngleAxis, Radar, PolarRadiusAxis, ComposedChart, Area } from 'recharts';
import { useFitness } from '../../contexts/FitnessContext';

export const Form: React.FC = () => {
    const { fitnessData, filteredData, groupedData } = useFitness();
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        // 获取数据的逻辑
        // ...
        setLoading(false);
    }, []);

    if (loading) {
        return <div>加载中...</div>;
    }

    // 饼图颜色
    const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

    return (
        <div className="min-h-screen bg-white-900 p-8">
            <div className="max-w-screen-2xl mx-auto">
                <h1 className="text-5xl font-bold text-white mb-8">大屏可视化系统</h1>
                {/* 数据概览卡片 */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                    <div className="bg-blue-500 rounded-lg p-6 text-white">
                        <h3 className="text-xl">总记录数</h3>
                        <p className="text-4xl font-bold">{fitnessData?.length || 0}</p>
                    </div>
                    <div className="bg-green-500 rounded-lg p-6 text-white">
                        <h3 className="text-xl">平均成绩</h3>
                        <p className="text-4xl font-bold">
                            {(fitnessData?.reduce((sum, data) => sum + data.score, 0) / fitnessData?.length || 0).toFixed(2)}
                        </p>
                    </div>
                    <div className="bg-purple-500 rounded-lg p-6 text-white">
                        <h3 className="text-xl">最高成绩</h3>
                        <p className="text-4xl font-bold">
                            {Math.max(...(fitnessData?.map(data => data.score) || []))}
                        </p>
                    </div>
                    <div className="bg-red-500 rounded-lg p-6 text-white">
                        <h3 className="text-xl">最低成绩</h3>
                        <p className="text-4xl font-bold">
                            {Math.min(...(fitnessData?.map(data => data.score) || []))}
                        </p>
                    </div>
                </div>
                {/* 数据可视化区域 */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-12">
                    {/* 柱状图 */}
                    <div className="bg-gray-800 rounded-lg p-6">
                        <h3 className="text-xl text-white mb-4">柱状图</h3>
                        <ResponsiveContainer width="100%" height={400}>
                            <BarChart
                                data={filteredData}
                                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
                            >
                                <CartesianGrid strokeDasharray="3 3" stroke="#4a5568" />
                                <XAxis dataKey="id" stroke="#fff" />
                                <YAxis stroke="#fff" />
                                <Tooltip />
                                <Legend />
                                <Bar dataKey="score" fill="#8884d8" animationDuration={500} />
                            </BarChart>
                        </ResponsiveContainer>
                    </div>
                    {/* 组合图 */}
                    <div className="bg-gray-800 rounded-lg p-6">
                        <h3 className="text-xl text-white mb-4">组合图</h3>
                        <ResponsiveContainer width="100%" height={400}>
                            <ComposedChart
                                data={filteredData}
                                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
                            >
                                <CartesianGrid strokeDasharray="3 3" stroke="#4a5568" />
                                <XAxis dataKey="id" stroke="#fff" />
                                <YAxis stroke="#fff" />
                                <Tooltip />
                                <Legend />
                                <Bar dataKey="score" barSize={20} fill="#8884d8" animationDuration={500} />
                                <Line type="monotone" dataKey="height" stroke="#ff7300" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 8 }} />
                                <Area type="monotone" dataKey="weight" fill="#8884d8" stroke="#8884d8" />
                            </ComposedChart>
                        </ResponsiveContainer>
                    </div>
                    {/* 饼图 */}
                    <div className="bg-gray-800 rounded-lg p-6">
                        <h3 className="text-xl text-white mb-4">饼图</h3>
                        <ResponsiveContainer width="100%" height={400}>
                            <PieChart> 
                                <Pie
                                    data={groupedData}
                                    cx="50%"
                                    cy="50%"
                                    labelLine={false}
                                    outerRadius={150}
                                    fill="#8884d8"
                                    dataKey="value"
                                    animationBegin={0}
                                    animationDuration={800}
                                >
                                    {groupedData.map((entry, index) => (
                                        <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                                    ))}
                                </Pie>
                                <Tooltip />
                                <Legend />
                            </PieChart>
                        </ResponsiveContainer>
                    </div>
                    {/* 雷达图 */}
                    <div className="bg-gray-800 rounded-lg p-6">
                        <h3 className="text-xl text-white mb-4">数据概览雷达图</h3>
                        <ResponsiveContainer width="100%" height={400}>
                            <RadarChart outerRadius="80%" data={fitnessData}>
                                <PolarGrid />
                                <PolarAngleAxis dataKey="id" />
                                <PolarRadiusAxis />
                                <Radar
                                    name="身高"
                                    dataKey="height"
                                    stroke="#8884d8"
                                    fill="#8884d8"
                                    fillOpacity={0.6}
                                />
                                <Radar
                                    name="体重"
                                    dataKey="weight"
                                    stroke="#82ca9d"
                                    fill="#82ca9d"
                                    fillOpacity={0.6}
                                />
                                <Radar
                                    name="肺活量"
                                    dataKey="lungs_capacity"
                                    stroke="#ffc658"
                                    fill="#ffc658"
                                    fillOpacity={0.6}
                                />
                                <Radar
                                    name="跑步时间"
                                    dataKey="running_time"
                                    stroke="#ffc658"
                                    fill="#ffc658"
                                    fillOpacity={0.6}
                                />
                                <Radar
                                    name="成绩"
                                    dataKey="score"
                                    stroke="#ffc658"
                                    fill="#ffc658"
                                    fillOpacity={0.6}
                                />
                                <Tooltip />
                                <Legend />
                            </RadarChart>
                        </ResponsiveContainer>
                    </div>
                </div>
                {/* 数据操作区域 */}
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div className="bg-gray-800 rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow duration-300">
                        <AddForm />
                        {/* 折线图 */}
                        <div className="bg-gray-800 rounded-lg p-6 mt-4">
                            <h3 className="text-xl text-white mb-4">折线图</h3>
                            <ResponsiveContainer width="100%" height={400}>
                                <LineChart
                                    data={filteredData}
                                    margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
                                >
                                    <CartesianGrid strokeDasharray="3 3" stroke="#4a5568" />
                                    <XAxis dataKey="id" stroke="#fff" />
                                    <YAxis stroke="#fff" />
                                    <Tooltip />
                                    <Legend />
                                    <Line
                                        type="monotone"
                                        dataKey="score"
                                        stroke="#82ca9d"
                                        strokeWidth={2}
                                        dot={{ r: 4 }}
                                        activeDot={{ r: 8 }}
                                        animationDuration={500}
                                    />
                                </LineChart>
                            </ResponsiveContainer>
                        </div>
                    </div>
                    <div className="bg-gray-800 rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 overflow-auto">
                        <FormItem />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Form;